<template>
  <div class="center-content">
    <!--                         我的收藏版面-->
    <section class="self-stow">

      <div class="self-left">
        <!--      这里类名和标签结构与活动模块213行的一致，用activity-time类名使样式统一，减少css代码，另外设置并列类名stow-left调整，time-1类名使正在显示收藏选项与其他收藏区别-->
        <div class="activity-time time-1 stow-left">
          <span>收藏图文</span>
          <span>10</span>
        </div>
        <div class="activity-time stow-left">
          <span>收藏视频</span>
          <span>7</span>
        </div>
        <div class="activity-time stow-left">
          <span>我的关注</span>
          <span>40</span>
        </div>
      </div>


      <div class="stow-content">
        <div class="stow-right">
          <div class="stow-header">
            <span>批量操作</span>
            <div class="stow-search-item">
              <div class="stow-search-svg"></div>
            </div>
          </div>
          <div class="stow-item">
            <div class="stow-module">
              <li class="stow-list" v-for="i in 12">
                <div class="stow-img"></div>
                <div class="stow-title">聚焦特色，课程学习多维化</div>
                <div class="stow-time">
                  <span>收藏于</span>
                  <span>2024年2月3日</span>
                </div>
              </li>
            </div>
          </div>
        </div>
        <Pagination></Pagination>
      </div>
    </section>

  </div>

</template>

<script setup>

import Pagination from "../../../components/Pagination/Pagination.vue";
</script>

<style scoped>

.activity-time {
  margin-top: 6px;
  width: 100%;
  height: 3.5rem;
  line-height: 3.5rem;
  text-align: center;
  color: rgba(156, 0, 0, 1);
  font-weight: 700;
  cursor: pointer;
}

.time-1 {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(156, 0, 0, 1);
}

/*我的收藏版面*/
.self-stow {
  display: flex;
  width: 100%;
  height: 100%;

}

.self-left {
  width: 20rem;
  /*height:100%;*/
  padding-top: 3.5rem;
  border-right: 3px solid rgba(156, 0, 0, 1);
  /*background-color: yellow;*/
}

.stow-left {
  display: flex;
  justify-content: space-around;
}

.stow-left span {
  letter-spacing: 2px;
}

.stow-right {
  width: 84rem;
  height: 55rem;
  /*background-color: yellow;*/
  overflow: hidden;
  margin-top: 2rem;
  margin-left: 2rem;
  padding: 13px 0 0 0px;
}

.stow-header {
  display: flex;
  justify-content: flex-end;
  height: 2rem;
  /*background-color: red;*/
  margin-bottom: 2rem;
}

.stow-header span {
  color: rgba(156, 0, 0, 1);
  font-size: 14px;
  letter-spacing: 2px;
  margin-right: 2rem;
}

.stow-search-item {
  width: 16rem;
  height: 2rem;
  border-radius: 15px;
  border: 1px solid rgba(156, 0, 0, 1);
}

.stow-search-svg {
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  background-size: 1.5rem 1.5rem;
  background-position: center;
}

.stow-module {
  width: 100%;
  display: flex;
  justify-content: left;
  /*justify-content: space-around;*/
  flex-wrap: wrap;
}

.stow-list {
  width: 18rem;
  height: 14rem;
  list-style: none;
  margin-bottom: 3.5rem;
}

.stow-list:not(:nth-child(4n)) {
  margin-right: 4rem;

}

.stow-img {
  width: 100%;
  height: 10rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.stow-title {
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  margin-top: 0.5rem;
}

.stow-time {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: rgba(166, 166, 166, 1);
  font-size: 8px;
  letter-spacing: 2px;
  margin-top: 0.5rem;
}

.activty-module li {
  list-style: none;
  margin-left: 1.2rem;
  cursor: pointer;
  /*margin-top: 2rem;*/
}



</style>
